<template>
  <div class="content">
    <PositionSearch @positionSearchSub="getPublish"></PositionSearch>
    <div class="block screen-block">

      <div class="screen-item">
        <div class="screen-label">薪资</div>
        <div class="screen-content1">
          <div :class="salaryId===''?'active':''" @click="salaryId=''" class="option-item radio">
            不限
          </div>
          <div v-for="(item,index) in salaryList" :key="item.id" :class="salaryId===item.id?'active':''"
               @click="salaryId=item.id" class="option-item radio">
            {{ item.data }}
            <template v-if="index>=0">元</template>
            <template v-if="index===salaryList.length-1">以上</template>
          </div>
        </div>
      </div>
      <div class="screen-item">
        <div class="screen-label">经验</div>
        <div class="screen-content">
          <div :class="expId===''?'active':''" @click="expId=''" class="option-item radio">
            不限
          </div>
          <div v-for="(item,index) in experienceList" :key="item.id" :class="expId===item.id?'active':''"
               @click="expId=item.id" class="option-item radio">
            {{ item.data }}
            <template v-if="index>0"></template>
            <template v-if="index===experienceList.length-1"></template>
          </div>
        </div>
      </div>
      <div class="screen-item">
        <div class="screen-label">更多</div>
        <div class="screen-content">
          <div class="option-item">
            学历：
            <el-select v-model="eduId" placeholder="请选择学历" class="info-box">
              <el-option
                  :label="'不限'"
                  :value="''">
              </el-option>
              <el-option
                  v-for="item in educationList"
                  :key="item.id"
                  :label="item.data"
                  :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="option-item ">
            行业：
            <el-cascader v-model="jobType" placeholder="请选择行业"
                         :options="category"
                         :props="optionProps"
                         clearable
                         :show-all-levels="false"
                         @change="handleChange"></el-cascader>
          </div>
        </div>
      </div>
    </div>
    <div class="block info-block">

      <div class="list-block" v-loading="positionLoading">
        <div class="list-order">
          <div class="list-order-title">排序方式：</div>
          <div class="list-order-time">
            <div class="list-order-time-info" :class="orderDate===0?'':'select'" @click="toOrderDate">最新
              <i class="el-icon-caret-bottom" v-if="orderDate===1" style="color: #FFFFFF"></i>
              <i class="el-icon-caret-top" v-if="orderDate===2" style="color: #FFFFFF"></i>
            </div>
            <div class="list-order-time-info" :class="orderEducation===0?'':'select'" @click="toOrderEducation">学历
              <i class="el-icon-caret-bottom" v-if="orderEducation===1" style="color: #FFFFFF"></i>
              <i class="el-icon-caret-top" v-if="orderEducation===2" style="color: #FFFFFF"></i>
            </div>
            <div class="list-order-time-info" :class="orderWages===0?'':'select'" @click="toOrderWages">薪资
              <i class="el-icon-caret-bottom" v-if="orderWages===1" style="color: #FFFFFF"></i>
              <i class="el-icon-caret-top" v-if="orderWages===2" style="color: #FFFFFF"></i>
            </div>
          </div>
          <div style="height: 64px;line-height: 64px;float: right;">
            共为您找到<span style="color: #ff7626">{{ count }}</span>个职位
          </div>
        </div>
        <template v-if="positionList.length>0">
          <PositionItemRow class="position-item" :key="item.id" :data="item"
                           v-for="(item,index) in positionList"></PositionItemRow>
          <div v-if="positionList.length>0" style="display: flex; justify-content: flex-end">
            <el-pagination
                background
                :page-size="limit"
                layout="prev, pager, next"
                :total="count"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </template>
        <el-empty v-else style="margin: 0 auto"></el-empty>
      </div>

      <div class="user-info-block">
        <CoverLoading v-if="coverLoading" type="0"></CoverLoading>
        <div class="invite-image">
          <div @click="reviewResume"><img src="@/assets/images/create-resume.jpg"
                                          style="width: 380px; height: 100px;cursor: pointer;"></div>
          <router-link :to="{name:'jobIndex'}"><img src="@/assets/images/7.png"
                                                    style="width: 380px; height: 100px; margin-top: 5px;"></router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PositionSearch from "@/components/PositionSearch/PositionSearch";
import PositionItemRow from "@/components/PositionItem/PositionItemRow";
import CoverLoading from '@/components/CoverLoading/CoverLoading';
import {getEducationApi, getExperienceApi, getSalaryListApi} from "@/api/personal";
import {getPublish, findJobNameApi} from "@/api/position";
import {getResumePdf} from "@/api/mineCenter";

export default {
  name: "positionFiltrate",
  components: {PositionItemRow, PositionSearch, CoverLoading},
  data() {
    return {
      jobTitle: '',
      category: [],
      jobType: '',
      orderDate: 1,
      orderEducation: 0,
      orderWages: 0,
      optionProps: {
        value: 'id',
        label: 'jobTitle',
        children: 'subLevelModelList',
        checkStrictly: true,
        emitPath: true
      },

      salaryId: '',
      salaryList: [],

      expId: '',
      experienceList: [],

      eduId: '',
      educationList: [],

      positionLoading: false,
      positionList: [],
      page: 1,
      limit: 10,
      count: 0,
      coverLoading: false,
    }
  },
  methods: {
    toOrderDate() {
      this.orderDate = this.orderDate === 1 ? 2 : 1;
      this.orderEducation = 0
      this.orderWages = 0
    },
    toOrderEducation() {
      this.orderEducation = this.orderEducation === 1 ? 2 : 1;
      this.orderDate = 0
      this.orderWages = 0
    },
    toOrderWages() {
      this.orderWages = this.orderWages === 1 ? 2 : 1;
      this.orderEducation = 0
      this.orderDate = 0
    },
    //三级职业
    findJobName() {
      findJobNameApi({postType: 1}).then((res) => {
        this.category = res
      }).finally(() => {
      })
    },
    handleChange(value) {
      if (value.length === 3) {
        this.jobType = value[2] ?? '';
        this.jobLevel = 3;
      }
      if (value.length === 2) {
        this.jobType = value[1] ?? '';
        this.jobLevel = 2;
      }
      if (value.length === 1) {
        this.jobType = value[0] ?? '';
        this.jobLevel = 1;
      }
    },
    getEducation() {
      getEducationApi().then((res) => {
        this.educationList = res
      }).finally(() => {
      })
    },
    getExperience() {
      getExperienceApi().then((res) => {
        this.experienceList = res
      }).finally(() => {
      })
    },
    getSalaryList() {
      getSalaryListApi().then((res) => {
        this.salaryList = res
      }).finally(() => {
      })
    },
    getPublish(keyword) {
      this.positionLoading = true
      console.log(this.jobLevel)
      getPublish({
        jobTitle: keyword,
        expId: this.expId,
        salaryId: this.salaryId,
        eduId: this.eduId,
        jobType: this.jobType,
        jobLevel: this.jobLevel,
        orderDate: this.orderDate,
        orderEducation: this.orderEducation,
        orderWages: this.orderWages,
        page: this.page,
        limit: this.limit
      }).then((res) => {
        this.positionList = res.list
        this.count = res.count
        console.log(this.positionList)
      }).finally(() => {
        this.positionLoading = false
      })
    },
    // 每页显示数量change
    handleSizeChange(e) {
      this.limit = e
      this.getPublish()
    },
    // 当前页change
    handleCurrentChange(e) {
      this.page = e
      this.getPublish()
    },
    //预览简历
    reviewResume() {
      this.coverLoading = true
      getResumePdf({}).then((res) => {
        setTimeout(() => {
          this.coverLoading = false
          window.open(res)
        }, 2000)
      }).catch(() => {
        this.coverLoading = false
      })
    },
  },
  watch: {//监听
    salaryId: {
      handler() {
        this.getPublish();
      },
    },

    orderDate: {
      handler() {
        this.getPublish();
      },
    },
    orderEducation: {
      handler() {
        this.getPublish();
      },
    },
    orderWages: {
      handler() {
        this.getPublish();
      },
    },
    expId: {
      handler() {
        this.getPublish();
      },
    },
    eduId: {
      handler() {
        this.getPublish();
      },
    },
    jobType: {
      handler() {
        this.getPublish();
      },
    }
  },
  mounted() {
    this.utils.createParams(this, this.$route.query);
    this.jobType *= 1;
    this.getPublish()
    this.findJobName();
    this.getEducation()
    this.getExperience()
    this.getSalaryList()
  }
}
</script>

<style scoped lang="scss">
.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  min-height: $fullMinHeight;
}

.block {
  width: $contentWidth;
  margin: 0 auto;
  margin-top: 16px;
}

.block.create-resume-block {
  height: 165px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}

.block.job-fair-block {
  height: 120px;
  display: flex;
  flex-direction: row;

  img {
    width: calc((100% - 40px) / 3);
    height: 100%;
    margin-right: 20px;
    border-radius: 5px;
    cursor: pointer;
  }

  img:last-child {
    margin-right: 0;
  }
}

.block.screen-block {
  background: #fff;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  flex-direction: column;

  .screen-item {
    width: 100%;
    display: flex;
    flex-direction: row;
    min-height: 45px;
    align-items: center;

    .screen-label {
      width: 40px;
      margin-right: 10px;
      font-weight: bold;
      font-size: 15px;
    }

    .screen-label1 {
      width: 80px;
      margin-right: 10px;
      font-size: 15px;
    }

    .screen-content {
      width: calc(100% - 100px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 14px;
      padding: 10px 0;
      .option-item {
        margin: 0 10px;
        cursor: pointer;
      }

      .option-item.photo {
        width: 60px;
        height: 60px;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .option-item.photo.active {
        border: 1px solid $orange;
      }

      .option-item.radio {
        color: $darkGray;
      }

      .option-item.radio.active {
        color: $orange;
        font-weight: bold;
      }

      .option-item.select {
        border: 1px solid #efefef;
        border-radius: 7px;
        padding: 5px;
        width: 160px;
      }
    }

    .screen-content1 {
      width: calc(100% - 40px);
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      font-size: 14px;
      padding: 10px 0;

      .option-item {
        margin: 0 13px;
        cursor: pointer;
      }

      .option-item.photo {
        width: 60px;
        height: 60px;
        border: 1px solid rgba(0, 0, 0, 0);
        border-radius: 10px;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .option-item.photo.active {
        border: 1px solid $orange;
      }

      .option-item.radio {
        color: $darkGray;
      }

      .option-item.radio.active {
        color: $orange;
        font-weight: bold;
      }

      .option-item.select {
        border: 1px solid #efefef;
        border-radius: 7px;
        padding: 5px;
        width: 160px;
      }
    }
  }
}

.block.info-block {
  display: flex;
  flex-direction: row;
  height: auto;

  .list-block {
    height: auto;
    width: calc(100% - 400px);
    margin-right: 20px;
    display: flex;
    flex-direction: column;

    .position-item {
      margin-bottom: 20px;
    }

    .list-order {
      background-color: #FFFFFF;
      width: 100%;
      min-height: 40px;
      margin-bottom: 20px;
      display: flex;

      .list-order-title {
        margin: 20px;
      }

      .list-order-time {
        display: flex;
        margin: 20px 20px 20px 0;
        width: 60%;

        .list-order-time-info {
          line-height: 24px;
          padding: 0 8px;
          height: 24px;
          text-indent: 5px;
          cursor: pointer;
          color: $orange;
          margin-left: 20px;
        }

        .select {
          background-color: $orange;
          color: #FFFFFF;
          border-radius: 12px;

        }
      }
    }
  }

  .user-info-block {
    width: 380px;
    display: flex;
    flex-direction: column;

    .user-info-item {
      padding: 20px;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 20px;
    }

    .user-info-item:last-child {
      margin-bottom: 0;
    }

    .user-info-item.user {
      display: flex;
      flex-direction: column;
      padding-bottom: 0;

      .user-photo-block {
        display: flex;
        flex-direction: row;
        align-items: center;

        .user-photo {
          width: 85px;
          height: 85px;
          border-radius: 50%;
          margin-right: 10px;
        }

        .user-name-block {
          width: calc(100% - 95px);
          display: flex;
          flex-direction: column;

          .user-name {
            font-weight: bold;
            font-size: 18px;
          }

          .edit-resume {
            font-size: 14px;
            margin-top: 10px;
            color: $darkGray;
          }
        }
      }

      .statistics-block {
        display: flex;
        flex-direction: row;
        padding-bottom: 10px;
        border-bottom: 1px solid $lightGray;

        .statistics-item {
          width: 25%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-top: 20px;

          .statistics-count {
            font-size: 26px;
            font-weight: bold;
          }

          .statistics-name {
            margin-top: 2px;
            font-size: 15px;
            color: #000;
          }
        }
      }

      .message {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 50px;

        .my-message {
          flex-grow: 1;
        }

        .iconfont {
          flex-grow: 0;
        }
      }
    }

    .user-info-item.privacy {
      display: flex;
      flex-direction: column;

      .privacy-item {
        width: 100%;
        display: flex;
        flex-direction: row;
        margin-bottom: 20px;
        font-size: 14px;
        align-items: center;

        .label {
          flex-grow: 1;
        }

        .value {
          flex-grow: 0;
          color: $darkGray;
        }
      }

      .privacy-item:last-child {
        margin-bottom: 0;
      }

      .privacy-item.resume {
        .label {
          font-weight: bold;
          font-size: 18px;
        }

        .setting {
          color: $orange;
        }
      }
    }

    .user-info-item.setting {
      display: flex;
      flex-direction: row;
      align-items: center;

      .name {
        flex-grow: 1;
        font-size: 18px;
        font-weight: bold;
      }

      .iconfont {
        flex-grow: 0;
      }
    }
  }
}
</style>
